<template>
  <div class="mod-demo-echarts">
    <div id="mapEcharts" class="map-echarts" @click="showChinaMap"></div>
    <div id="chartBarBox" class="map-echarts" @click="showChinaMap"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  // import china from '../../../static/geomapdata/china_full.json'
  import axios from 'axios'

  // echarts.registerMap('china', china)
  var provinces = ['shanghai', 'beijing', 'tianjin', 'hebei']
  var provincesText = ['上海', '北京', '天津', '河北省']

  export default {
    created () {
    },
    data () {
      return {
        map: {}
      }
    },
    activated () {
      if (this.chartBar) {
        this.chartBar.resize()
      }
    },
    props: {},
    methods: {
      getMapOpt (place) {
        console.log('获取地图 option - ' + place)
        const option = {
          backgroundColor: '#F3F3F3',
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          toolbox: {
            show: true,
            origin: 'vertical',
            left: 'right',
            top: 'center',
            featrue: {
              restore: {},
              saveAsImage: {}
            }
          },
          geo: {
            map: place || 'china',
            zoom: 1.2,
            label: {
              emphasis: {
                show: false
              },
              normal: {
                show: true,
                textstyle: {
                  color: 'rgba(0,0,0)'
                }
              }
            },
            roam: true
          },
          itemStyle: {
            normal: {
              areaColor: '#6FA7CE',
              borderColor: '#fff'
            },
            emphasis: {
              areaColor: '#B7DFED'
            }
          }
        }
        return option
      },
      showChinaMap () {
        // const option = this.getMapOpt()
        // this.map.setOption(option, true)
        // console.log('show china map:')
        // console.log(this.map.getOption())
        // console.log(option)
        axios.get('../../../static/geomapdata/china_full.json').then((s) => {
          echarts.registerMap('china', s.data)
        })
        console.log('show china map:')
      },
      // 显示各省地图
      getProvinceMapOpt (provinceAlphabet) {
        axios.get('province/' + provinceAlphabet + '.json').then((s) => {
          console.log('显示省地图:' + provinceAlphabet)
          echarts.registerMap(provinceAlphabet, s.data)
          const option = this.getMapOpt(provinceAlphabet)
          this.map.setOption(option, true)
        })
      },
      initMap () {
        console.log('initmap 初始化地图')
        var dom = document.getElementById('mapEcharts')
        this.map = echarts.init(dom)
        this.showChinaMap()
        this.map.setOption(this.getMapOpt('china'))
        window.addEventListener('resize', () => {
          this.map.resize()
        })
        // const option = this.getMapOpt('china')
        // if (option && typeof option === 'object') {
        //   this.map.setOption(option, true)
        //   console.log('initmap setOption')
        // }
        this.map.on('click', (param) => {
          // event.stopPropagation() // 阻止冒泡
          console.log('click 地图')
          const provinceIndex = provincesText.findIndex(x => {
            return param.name === x
          })
          if (provinceIndex === -1) {
            return
          }
          console.log('重新渲染省份地图:' + provinceIndex)
          const provinceAlphabet = provinces[provinceIndex]
          // 重新渲染省份地图
          this.getProvinceMapOpt(provinceAlphabet)
        })
      },
      initChartBar () {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '邮件营销',
              type: 'bar',
              stack: '广告',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'bar',
              stack: '广告',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'bar',
              stack: '广告',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '搜索引擎',
              type: 'bar',
              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
              markLine: {
                lineStyle: {
                  normal: {
                    type: 'dashed'
                  }
                },
                data: [
                  [{ type: 'min' }, { type: 'max' }]
                ]
              }
            },
            {
              name: '百度',
              type: 'bar',
              barWidth: 5,
              stack: '搜索引擎',
              data: [620, 732, 701, 734, 1090, 1130, 1120]
            },
            {
              name: '谷歌',
              type: 'bar',
              stack: '搜索引擎',
              data: [120, 132, 101, 134, 290, 230, 220]
            },
            {
              name: '必应',
              type: 'bar',
              stack: '搜索引擎',
              data: [60, 72, 71, 74, 190, 130, 110]
            },
            {
              name: '其他',
              type: 'bar',
              stack: '搜索引擎',
              data: [62, 82, 91, 84, 109, 110, 120]
            }
          ]
        }
        this.chartBar = echarts.init(document.getElementById('chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      }
    },
    computed: {},
    mounted () {
      this.$nextTick(() => {
        console.log('开始调用 initmap')
        this.initMap()
        this.initChartBar()
      })
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    .el-alert {
      margin-bottom: 10px;
    }
    .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
    .map-echarts {
        height: 900px;
        width: 900px
    }
  }
</style>
